import imageLoad from './imageLoad'
class drawimg {
    constructor (param) {
        this.ctx = param.ctx
        this.view = param.view
        this.pos = param.pos;
        this.size = param.size;
        this.ports = param.ports
    }
    init () {}
    async draw () {
        let imageData = await imageLoad(this.view);
        console.log("要画的板卡:", imageData)
        const { x, y } = this.pos;
        const { width, height } = this.size;
        this.ctx.save();
        // 移动画布到要绘制的位置中心点
        this.ctx.translate(x + width/2, y + height/2);
        let angle = Math.PI / 2
        // 旋转
        const cosA = Math.cos(angle);
        const sinA = Math.sin(angle);
        this.ctx.rotate(Math.PI / 2); // 旋转90度
       
        // 绘制图片，位置调整为左上角
        this.ctx.drawImage(
            imageData.img,
            -imageData.width/2,   // 左上角x
            -imageData.height/2,  // 左上角y
            imageData.width,
            imageData.height
        );
    
        this.ctx.restore();
        /*
        for(let i=0;i<this.ports.length; i++){
            this.drawPort(this.ports[i], imageData)
        } */
            for (let port of this.ports) {
                // 计算端口旋转后的偏移
                const rotatedX = port.pos.x * cosA - port.pos.y * sinA;
                const rotatedY = port.pos.x * sinA + port.pos.y * cosA;
                // 绘制端口
                this.drawPort({ ...port, pos: { x: rotatedX + this.pos.x, y: rotatedY + this.pos.y} }, imageData);
            }
    
    }

    drawPort(port, imageData) {
        const offsetX = port.pos.x + port.size.width/2;
        const offsetY = port.pos.y + port.size.height/2;
    
        const portWidth = port.size.width;
        const portHeight = port.size.height;
    
        this.ctx.save();
    
        // 只在当前变换状态（已旋转）基础上偏移
        this.ctx.translate(offsetX, offsetY);
    
        // 绘制端口
        this.ctx.fillStyle = 'rgba(68, 255, 0, 0.5)';
        this.ctx.fillRect(-portWidth / 2, -portHeight / 2, portWidth, portHeight);
        this.ctx.strokeStyle = 'black';
        this.ctx.lineWidth = 2;
        this.ctx.strokeRect(-portWidth / 2, -portHeight / 2, portWidth, portHeight);
    
        this.ctx.restore();
    }

    drawPort_(port, imageData) {
        const offsetX = port.pos.x;
        const offsetY = port.pos.y;

        // 端口在板卡中的相对位置（相对于板卡中心）
        const portX = -imageData.width/2 + offsetX;
        const portY = -imageData.height/2 + offsetY;

        this.ctx.save();

        // 在已旋转变换后，直接在板卡的坐标系内绘制
        this.ctx.translate(this.pos.x, this.pos.y);
        this.ctx.translate(portX, portY);

        // 绘制矩形端口（以中心为原点）
        const portWidth = port.size.width;
        const portHeight = port.size.height;

        this.ctx.fillStyle = 'rgba(68, 255, 0, 0.5)';
        this.ctx.fillRect(-portWidth/2, -portHeight/2, portWidth, portHeight);

        this.ctx.strokeStyle = 'black';
        this.ctx.lineWidth = 2;
        this.ctx.strokeRect(-portWidth/2, -portHeight/2, portWidth, portHeight);

        this.ctx.restore();
    }
    
}

export default drawimg